<template>
	<view class="all" style="padding-top: 50rpx;">
		<!-- 画面start -->
		<image style="width: 100%;height: 238rpx;" :src="img"></image>
		<view class=""
			style=" margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="red-tip">
						系统将对不同场景的素材，按照爆款逻辑自动搭配文案和音乐，并批量合成爆款视频
					</view>

					<view class="RadioNum">
						<radio-group @change="handleRadioChange">
							<label class="radio">
								<radio value="r1" :checked="selectedValue === 'r1'" />一镜成片
							</label>
							<label class="radio">
								<radio value="r2" :checked="selectedValue === 'r2'" />多镜成片
							</label>
						</radio-group>
					</view>
					<view class="sing-box">
						<view class="left">拍摄脚本</view>
						<view class="right" @click="navJiaobenku">
							<text>{{jiaoben.length == 0 ? '选择拍摄脚本':'已选择'}}</text>
							<text class="jiantou">></text>
						</view>
					</view>

					<view class="sing-box" v-if="selectedValue === 'r1'">
						<view class="left" style="width: 220rpx;display: flex;">
							<view class="question">?</view>
							<text>素材时长</text>
						</view>
						<view class="right">
							<!-- <text style="color: #333;">3</text> -->
							<picker @change="miaoPickerChange" :value="miaoIndex" :range="miaoList">
								<text style="color: #666;">每个镜头裁剪到时长</text>
								<text style="color: #333;">{{miaoList[miaoIndex]}}秒</text>
							</picker>
							<text class="right-icon">></text>
						</view>
					</view>
					<!-- 视频素材 start -->
					<view class="sucai" v-if="selectedValue === 'r1'">
						<view class="header">
							视频素材：随机上传不分顺序
						</view>
						<view class="beizhu">
							备注：上传<text style="color: red;">1~60</text>秒的视频，自动剪辑配乐配文案，口播请选择口播模式</text>
						</view>
						<view class="shuoming">
							说明：若本视频工程创建后用于矩阵发布，请上传尽可能多的镜头素材(视频)，避免大量发布时被判重</text>
						</view>
						<view style="display: flex;flex-wrap: wrap;">

							<view style="display: flex;">
								<block>
									<view style="position: relative;margin-right: 20rpx;"
										v-for="(item,index) in form.videoList" :key="index">
										<video :src="item.mediaURL" style="height: 150rpx;width: 150rpx;"></video>
										<view class="close" @click="deleteVideo(index)">
											x
										</view>
									</view>
								</block>
							</view>
							<view class="video-upload">
								<image src="../../static/images/xiangji.png" style="height: 70rpx;width: 70rpx;"
									@click="sendVideo()"></image>
							</view>
							<view class="video-upload"
								style="margin-left: 20rpx;display: flex;flex-direction: column;color: #666;">
								<image src="../../static/images/sucaiku.png" style="height: 50rpx;width: 50rpx;"
									@click="sucaikuChoose"></image>
								<view style="font-size: 26rpx;">素材库</view>
							</view>
						</view>

						<view class="sing-box">
							<view class="left" style="width: 220rpx;display: flex;">
								滤镜设置
							</view>
							<view class="right">
								<switch style="transform:scale(0.7)" :checked="form.isFilter" @change="onFilter">
								</switch>
							</view>

						</view>
						<view class="sing-box" v-if="form.isFilter" @click="navFilter">
							<view class="left" style="font-weight: normal;">
								<text>滤镜选择</text>
							</view>
							<view class="right">
								<text class="right-tip">{{form.filter ? form.filter: '去选择'}}</text>
								<text class="right-icon">></text>
							</view>
						</view>
					</view>
					<!-- 视频素材 end -->

					<view class="sucaishichang" v-if="selectedValue === 'r2'">
						<view class="item">
							<view class="left">
								<text>统一时长</text>
							</view>
							<view>
								<switch style="transform:scale(0.7)" :checked="checkyi" @change="onSwitchChange">
								</switch>
							</view>
						</view>
						<view class="item" v-if="checkyi">
							<view class="left">
								<view class="question">?</view>
								<text>素材时长</text>
							</view>
							<view class="right">
								<!-- <text style="color: #333;">3</text> -->
								<picker @change="miaoPickerChange" :value="miaoIndex" :range="miaoList">
									<text>每个镜头裁剪到时长</text>
									<text style="color: #333;">{{miaoList[miaoIndex]}}秒</text>
								</picker>
								<text class="right-icon">></text>
							</view>
						</view>
					</view>

					<view class="sucaishichang" v-if="selectedValue === 'r2'">
						<view v-if="jiaoben.length == 0"
							style="padding: 20rpx; font-size: 30rpx;font-weight: bold; color: red;">
							请选择拍摄脚本</view>
						<block v-for="(item,index) in jiaoben" :key="index" v-else>
							<view class="item" @click="navJbscShangchuan(item,index)">
								<view class="left">
									<text class="xing">*</text>
									<text>场景{{index+1}}</text>
								</view>
								<view class="right">
									<text
										class="right-tip">{{form.videoList.filter(video => video.id == index + 1).length != 0 ? '已经上传'+form.videoList.filter(video => video.id == index +1).length+'视频' : '去上传'}}</text>
									<text class="right-icon">></text>
								</view>
							</view>
						</block>
						<view class="item">
							<view class="left">
								转场设置
							</view>
							<view class="right">
								<switch style="transform:scale(0.7)" @change="onZhuangchang"></switch>
							</view>
						</view>
					</view>
					
					<view class="sing-box" style="margin-top: -10rpx;" v-if="selectedValue === 'r2'" >
						<view class="left" style="width: 220rpx;display: flex;">
							滤镜设置
						</view>
						<view class="right">
							<switch style="transform:scale(0.7)" :checked="form.isFilter" @change="onFilter">
							</switch>
						</view>
					
					</view>
	
					<view class="sing-box" v-if="form.isFilter&&selectedValue === 'r2'" @click="navFilter">
						<view class="left" style="font-weight: normal;">
							<text>滤镜选择</text>
						</view>
						<view class="right">
							<text class="right-tip">{{form.filter ? form.filter: '去选择'}}</text>
							<text class="right-icon">></text>
						</view>
					</view>
					<!-- 统一素材时长 end -->
				</view>
			</view>
		</view>
		<image style="width: 100%;height: 37rpx; margin-top: -25rpx; margin-bottom: 20rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 画面end -->


		<!-- 文案部分start -->
		<image style="width: 100%;height: 58rpx;"
			src="https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/17109998445840bff3b4c34dd4f2680f514de78fb93fa.png">
		</image>
		<view class=""
			style=" margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="red-tip">
						注意：模剪文案默认智能随机匹配，用户也可以通过“文案自选或自定义”，选择自己满意的文案。
					</view>


					<view class="wenan">
						<view class="header">
							<view class="header-item" :class="{'wenan-type-active':wenanNav==1}"
								style="font-weight: bold;height: 80rpx;line-height: 80rpx; font-size: 40rpx;">
								顶部文案部分
							</view>
						</view>
						<view class="content">
							<view class="item" @click="navGuanjianci">
								<view class="left">文案关键词</view>
								<view class="right">
									<text style="color:#666">{{form.content == ''?'去设置':'已完成设置'}}</text>
									<text class="jiantou" style="color: #666;">></text>
								</view>
							</view>
							<view class="item" :data-title="shopTrade" @click="navDingbuwenan">
								<view class="left">
									文案自选或自定义
								</view>
								<view class="right">
									<text>{{isChoosed?'已选择':'随机匹配'}}</text>
									<text>></text>
								</view>
							</view>
							<view class="item" :data-title="shopTrade" @click="zitiweizhi">
								<view class="left">
									设置字体位置
								</view>
								<view class="right">
									<text>{{weizhi?'自定义':'默认'}}</text>
									<text>></text>
								</view>
							</view>
							<view class="item" @click="openVideoFontColor">
								<view class="left">
									视频字体颜色
								</view>
								<view class="right">
									<text>智能匹配</text>
									<text>></text>
								</view>
							</view>
							<view class="ziti">
								<text style="font-weight: bold;font-size: 32rpx;">字体大小设置{{form.fontSize}}</text>
								<view class="yulan">
									<text :style="{'font-size':form.fontSize+'px'}">预览字体</text>
								</view>
								<view class="slider-box" style="background-color: #dbdbdb;">
									<slider active-color="#d4237a" min="10" max="50" :value="form.fontSize"
										block-size="12" @changing="fontSizeChange"></slider>
									<view class="slider-footer">
										<view class="xiao">
											小
										</view>
										<view class="huifu" @click="huifuFontSize">
											恢复默认
										</view>
										<view class="da">
											大
										</view>
									</view>
								</view>
							</view>
							<view class=""
								style="margin-top: 50rpx; width: 100%; display: flex; justify-content: center; font-size: 40rpx; font-weight: bold;">
								口播字幕部分
							</view>
							<view class="item">
								<view class="left">
									口播设置
								</view>
								<view class="right">
									<switch style="transform:scale(0.7)" @change="onkoubu"></switch>
								</view>
							</view>
							<view class="item" v-if="koubo" @click="navPeiyinyuan">
								<view class="left">
									配音员
								</view>
								<view class="right">
									<text>{{peiyinyuanForm.username?peiyinyuanForm.username:'选择配音员>'}}</text>
								</view>
							</view>
							<view class="item" v-if="koubo" @click="navKouboText">
								<view class="left">
									口播文案
								</view>
								<view class="right">
									<text>{{form.textContent?'已自定义>':'默认顶部文案>'}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image style="width: 100%;height: 37rpx; margin-bottom: 30rpx; margin-top: -35rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 文案部分end -->



		<!-- 音乐设置start -->
		<image style="width: 100%;height: 58rpx;"
			src="https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/1710999876503239032008ae44d21be7ed64e2758cb1a.png">
		</image>
		<view class=""
			style=" margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="wenan">
						<view class="content">
							<view class="item" @click="navMusicSucai">
								<view class="left">
									背景音乐设置
								</view>
								<view class="right">
									<text>{{isChooseMusic ? '已选择':'智能匹配' }}</text>
									<text>></text>
								</view>
							</view>
							<view class="item" @click="localhostMusic" v-if="false">
								<view class="left">
									背景音乐个性化
								</view>
								<view class="right">
									<text>去设置</text>
									<text>></text>
								</view>
							</view>

							<view class="ziti">
								<text style="font-weight: bold;font-size: 32rpx;">背景音量设置{{form.yinLiang}}</text>

								<view class="slider-box">
									<slider active-color="#d4237a" min="0" max="100" :value="form.yinLiang"
										block-size="16" @changing="yinliangChange"></slider>
									<view class="slider-footer">
										<view class="xiao">
											小
										</view>
										<view class="huifu" @click="huifuYinliang">
											恢复默认
										</view>
										<view class="da">
											大
										</view>
									</view>
								</view>
							</view>

							<view class="ziti">
								<text style="font-weight: bold;font-size: 32rpx;">原素材音量设置{{form.yuanyin}}</text>

								<view class="slider-box">
									<slider active-color="#d4237a" min="0" max="100" :value="form.yuanyin"
										block-size="16" @changing="yuanyinChange"></slider>
									<view class="slider-footer">
										<view class="xiao">
											小
										</view>
										<view class="huifu" @click="huifuYuanYin">
											恢复默认
										</view>
										<view class="da">
											大
										</view>
									</view>
								</view>
							</view>

						</view>
					</view>
				</view>
			</view>
		</view>
		<image style="width: 100%;height: 37rpx; margin-bottom: 30rpx; margin-top: -35rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 音乐设置end -->

		<!-- 其他设置 -->
		<image style="width: 100%;height: 58rpx;"
			src="https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/17109997760963c6b878d159448f6a3fb01d21c470ce6.png">
		</image>
		<view class=""
			style=" margin-top: -1rpx; width: 100%; background: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/19/171085047023474c470af33ee4c029bc1c2add571737d.png'); background-size: contain;">
			<view style="height: 100%; width: 100%; padding:10rpx 50rpx 0rpx 50rpx;">
				<view class="" style="width: 650rpx;margin-top: -1rpx;">
					<view class="wenan">
						<view class="content">
							<view class="item">
								<view class="left">
									成品中心库名称：
								</view>
								<view class="right">
									<text>{{shopType+'+'+form.videoDay}}</text>
								</view>
							</view>
							<view class="item">
								<view class="left">
									商家所属行业
								</view>
								<view class="right">
									<text>{{shopTrade}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<image style="width: 100%;height: 37rpx; margin-bottom: 30rpx; margin-top: -35rpx;"
			src="../../static/images/8 (3).png"></image>
		<!-- 其他设置 -->

		<view class="" style="height: 50rpx; width: 100vw;">

		</view>

		<!-- 口播start -->
		<uni-popup ref="koubo" background-color="rgba(0,0,0,0)" type="bottom">
			<view style="background-color: #fff;">
				<view style="display: flex; flex-direction: column; justify-content: center;">
					<view
						style="font-size: 40rpx; font-weight: bold; height: 100rpx; align-items: center; width: 100%; display: flex; justify-content: center;">
						请设置视频口播文案</view>
					<radio-group @change="handleText"
						style="display: flex; justify-content: space-around; align-items: center; height: 100rpx; margin-bottom: 50rpx;">
						<label class="radio">
							<radio value="mo" :checked="form.selectText === 'mo'" />默认顶部文案
						</label>
						<label class="radio">
							<radio value="kou" :checked="form.selectText === 'kou'" />自定义文案
						</label>
					</radio-group>
				</view>
				<view class="" style="height: 300rpx; padding: 0 50rpx;" v-if="form.selectText === 'kou'">
					<editor placeholder='一行显示12个字,请以逗号","分隔每一句话' @input="onText"></editor>
				</view>
				<view
					style="margin: 0 auto ; width: 100vw; height: 70rpx; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 0rpx;">
					<view @click="enterText"
						style="border-radius: 30rpx; height: 100%; color: white; line-height: 70rpx; background-color: rgb(14, 16, 101); width: 100vw; text-align: center;">
						确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 口播end -->


		<!-- 字体颜色模态框 start -->
		<uni-popup ref="popup" background-color="rgba(0,0,0,0)" type="bottom">
			<view class="radius">
				<view class="header">
					<view>请设置视频字体颜色</view>
					<view style="font-weight: normal;font-size: 48rpx;color: #666" @click="closeVideoFontColor">x</view>
				</view>
				<scroll-view scroll-y="true" style="height: 600rpx;">
					<view class="content">
						<view class="item" v-for="(item,index) in fcList" :key="index" @click="changeFont(item,index)"
							:style="{fontFamily:item.family,color:item.color,'-webkit-text-stroke':'2rpx '+item.miaobian}"
							style="position: relative;">
							我的字体
							<image v-if="changeFontIndex == index"
								style="position: absolute; height: 30rpx;width: 30rpx;right: 0; bottom: 0;"
								src="../../static/images/youxiajiaoxuanzhong.png" mode=""></image>
						</view>
					</view>
				</scroll-view>
				<view
					style="margin: 0 auto; width: 100vw; height: 70rpx; display: flex; justify-content: center; align-items: center; position: fixed; bottom: 0rpx;">
					<view @click="enterFont"
						style="border-radius: 30rpx; height: 100%; color: white; line-height: 70rpx; background-color: rgb(14, 16, 101); width: 100vw; text-align: center;">
						确定</view>
				</view>
			</view>
		</uni-popup>
		<!-- 字体颜色模态框 start -->

		<!-- 确认按钮 -->
		<view class="BtnList">
			<view class="btn" @click="yulan" style="background-color: darkgrey;color: white;">预览视频</view>
			<view class="btn" @click="enter" style="background-color: rgb(14, 16, 101); color: white;">确认</view>
		</view>

		<!-- 确认弹出框start -->
		<view class="outer" v-if="expose">
			<view class="middle">
				<view class="inner">
					<view class="chat" @click="cancel">
						X
					</view>
					<view class="RadioNum">
						<radio-group @change="handleVideo">
							<div
								style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
								<label class="radio">
									<radio value="1" :checked="selectVideo === '1'" />标清
								</label>
								<text style="font-size: 25rpx;">(1积分)</text>
								<text style="font-size: 25rpx;">(480P)</text>
							</div>
							<div
								style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
								<label class="radio">
									<radio value="2" :checked="selectVideo === '2'" />高清
								</label>
								<text style="font-size: 25rpx;">(2积分)</text>
								<text style="font-size: 25rpx;">(720P)</text>
							</div>

							<div
								style="display: flex; flex-direction: column; justify-content: center; align-items: center;">
								<label class="radio">
									<radio value="3" :checked="selectVideo === '3'" />全高清
								</label>
								<text style="font-size: 25rpx;">(4积分)</text>
								<text style="font-size: 25rpx;">(1080P)</text>
							</div>
						</radio-group>
					</view>
					<view class="btn">
						<view class="enterBtn" @click="enter">
							确认生成视频
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 确认弹出框end -->
	</view>
</template>

<script>
	import debounce from 'lodash/debounce';
	import Http from "@/utils/http"
	import {
		forEach
	} from 'lodash';
import { showModal } from '../../utils/common';
	const http = new Http()
	const app = getApp()
	export default {
		data() {
			return {
				fontSize: '',
				yinLiang: '',
				isSetMubanGuanjianzi: false,
				isChoosed: false, //是否选择文案
				isChooseMusic: false, //是否选择音乐
				img: '',
				expose: false,
				shopTrade: '',
				toDay: '',
				shopType: '',
				miaoList: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
				miaoIndex: 6,
				baseHttp: '',
				shopId: '',
				alifontcolorList: [],
				selectedValue: 'r1',
				selectVideo: '1',
				jiaoben: [],
				checkyi: true,
				minDuration: '1',
				maxDuration: '60',
				fcList: [],
				videoList: [],
				changeFontIndex: 0,
				weizhi:false,
				koubo: false,
				isChoosePeiyin: false,
				peiyinyuanForm: {},
				form: {
					contentList:[],
					x:0,
					y:100,
					gif:false,
					selectText:'mo',
					textContent:'',
					yuanyin:0,
					miaobian: '#000000',
					type: '',
					fontSize: 24,
					font: 'FZHei-B01S',
					yinLiang: 10,
					jiaobenId: null,
					videoList: [],
					audioList: [],
					content: '',
					fontColor: '#f5d816',
					bitrate: 1,
					width: '',
					height: '',
					peiyinyuan: "",
					videoInfo: "",
					videoCategory: '',
					videoTime: '',
					videoDay: '',
					isQuchong: true,
					isZhuangchang: false,
					isFilter: false,
					filter:""
				}
			}
		},
		mounted() {
			this.shopId = app.globalData.shopId;
			this.baseHttp = app.globalData.baseHttp; // 输出 '我是全局变量'
			uni.$on('jiaoben', (data) => {
				this.jiaoben = data.changeList
				this.form.jiaobenId = data.id
			});
			uni.$on('classes', (classes) => {
				http.get('v1/music/categoryById/' + classes).then(res => {
					console.log(res);
				})
			});
			uni.$on('height', (height) => {
				this.form.y = height;
				this.weizhi = true;
			});
		},
		onLoad(option) {  
			this.form.type = option.id
			var family = ['FZHei-B01S', 'KaiTi', 'SiYuan SimSun']
			var colorList = [{
				color: "#f5d816",
				miaobian: "#000000"
			}, {
				color: "#ffffff",
				miaobian: "#000000"
			}, {
				color: "#fa689f",
				miaobian: "#ffffff"
			}, {
				color: "#ffffff",
				miaobian: "#ea4857"
			}, {
				color: "#d5d3a5",
				miaobian: "#493f33"
			}, {
				color: "#a9543e",
				miaobian: "#ffffff"
			}];
			var fontList = []
			for (let i = 0; i < family.length; i++) {
				for (let j = 0; j < colorList.length; j++) {
					let item = {
						family: family[i],
						color: colorList[j].color,
						miaobian: colorList[j].miaobian,
					}
					fontList.push(item)
				}
			}
			this.fcList = fontList

			uni.$on('videoList', (data) => {
				data.forEach(item => {
					if (!this.form.videoList.some(existingItem => existingItem.id === item.id &&
							existingItem.mediaURL === item.mediaURL)) {
						this.form.videoList.push(item);
					}
				});
			})
			switch (this.form.type) {
				case '1':
					this.form.videoCategory = this.shopType = '账号打标签';
					uni.setNavigationBarTitle({
						title: '账号打标签',
					})
					this.img =
						'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/25/1711358394748fcc6edf7add94ef896f388e11dcfd3d6.png'
					break;
				case '2':
					this.form.videoCategory = this.shopType = '人设破流量';
					uni.setNavigationBarTitle({
						title: '人设破流量',
					})
					this.img =
						'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/17110202421348aff959389a44134bb91ef9d0df7c29b.png'
					break;
				case '5':
					this.form.videoCategory = this.shopType = '企业硬广告';
					uni.setNavigationBarTitle({
						title: '企业硬广告',
					})
					this.img =
						'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/1711020197987665fa0019a6b496fab83413315584b3f.png'
					break;
				case '6':
					this.form.videoCategory = this.shopType = '企业做促销';
					uni.setNavigationBarTitle({
						title: '企业做促销',
					})
					break;
				case '7':
					this.form.videoCategory = this.shopType = '数字人视频';
					break;
				case '8':
					this.form.videoCategory = this.shopType = '视频做爆款';
					break;
				default:
					this.shopType = ''
			}

			// 创建一个 Date 对象
			var today = new Date();

			// 获取月份（注意：getMonth 方法返回的月份是从 0 开始计数的，需要加1）
			var month = today.getMonth() + 1;

			// 获取日期
			var day = today.getDate();

			// 输出月份和日期
			this.form.videoDay = month + "月" + day + "日";


			let obj = {
				category: this.form.type,
				tradeId: app.globalData.tradeId,
			}
			http.post('v1/mubanGuanjiazi/start', obj).then(res => {
				if (res.data.code == 200) {
					let dataList = res.data.data;
					let randomIndex = Math.floor(Math.random() * dataList.length);
					console.log(randomIndex);
					this.form.content = dataList[randomIndex].textContent;
					this.form.contentList = this.form.content.split('\n')
					
					let id = dataList[randomIndex].id;

					http.get('v1/music/categoryById/' + dataList[randomIndex].classes).then(res => {
						if (res.data.code == 200) {
							let obj = {
								"id": res.data.data.musicPath.id,
								"mediaURL": 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' + res
									.data.data.musicPath
							}
							this.form.audioList.push(obj)
						}
					})
				}
			})
			http.get(`v1/jiaoben/getRandOne?cateage=${this.form.type}`).then(res => {
				if (res.data.code == 200 && res.data.data != undefined) {
					this.jiaoben = JSON.parse(res.data.data.message);
				}
			})
			uni.showShareMenu({
				withShareTicket: true
			})
			this.getShopInfo();
			this.getAlifilterList()
		},
		onShow(option) {
			if (app.globalData.shopId) {
				http.get('v1/system/createShop/' + app.globalData.shopId).then(res => {
					this.shopTrade = res.data.data.trade;
				})
			}
			http.get("v1/mubanGuanjiazi/isSetMubanGuanjianzi").then(res => {
				this.isSetMubanGuanjianzi = res.data.data
			})
		},
		onShareAppMessage() {
			return {
				title: '模剪，傻瓜式制作有流量的视频',
				path: '/pages/index/index',
				imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' // 指定分享时显示的图片链接
			}
		},
		//2.配置分享到朋友圈
		onShareTimeline() {
			return {
				title: '模剪，傻瓜式制作有流量的视频', //分享的标题
				query: '/pages/index/index', //点击分享链接之后进入的页面路径
				imageUrl: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/28/1711607371526eab2a6157c4d4f22b17e09b737128967.png' //分享发送的链接图片地址
			}
		},
		methods: {
			zitiweizhi(){
				uni.navigateTo({
					url:'/subpkg/zitiweizhi/zitiweizhi'
				})
			},
			getAlifilterList() {
				http.get("v1/alifilter/list").then(res => {
					console.log("过滤======>", res);
				})
			},
			navFilter() {
				uni.navigateTo({
					url: "/subpkg/aliFilter/aliFilter"
				})
			},
			stripHtmlTags(html) {
				// 使用正则表达式匹配所有 HTML 标签，并替换为空字符串
				return html.replace(/<[^>]+>/g, '');
			},
			onText(event) {
				//获取富文本输入框
				this.form.textContent = this.stripHtmlTags(event.target.html);
			},
			navKouboText() {
				this.$refs.koubo.open();
			},
			updatefontSize(data) {
				this.fontSize = data
			},
			updateYinLiang(data) {
				this.yinLiang = data;
			},
			getMusic(classes) {
				http.get('v1/music/categoryById/' + classes).then(res => {
					this.form.audioList=[{
						"id": res.data.data.id,
						"mediaURL": 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' + res.data.data.musicPath
					
					}]
				})
			},
			miaoPickerChange(e) {
				console.log("eee", e);
				this.miaoIndex = e.detail.value
			},
			//打开视频库
			sucaikuChoose() {
				uni.navigateTo({
					url: "/subpkg/videoLibrary/secondType"
				})
			},
			//获取上传后的信息
			getShopInfo() {
				http.get('v1/info/search/' + app.globalData.shopId).then(res => {
					if (res.data.code == 200) {
						this.form.fontColor = res.data.data.fontColor;
						this.form.font = res.data.data.font;
						this.form.fontSize = res.data.data.fontSize;
						this.form.yinLiang = res.data.data.yinLiang;
						this.changeFontIndex = res.data.data.fontIndex;
						this.form.miaobian = res.data.data.miaobian;
					}
				})
			},


			//上传视频
			sendVideo() {
				uni.chooseMedia({
						count: 1,
						mediaType: ['video'],
						sizeType: ['original'],
						sourceType: ['album', 'camera'],
						minDuration: this.miaoList[this.miaoIndex],
						maxDuration: this.miaoList[this.miaoIndex], // 拍摄视频最长拍摄时间，单位秒
						camera: 'back',
						success: (resOne) =>  {
							var localPath = resOne.tempFiles[0].tempFilePath
							var height = resOne.tempFiles[0].height
							var width = resOne.tempFiles[0].width
						// res.tempFilePath 是选定视频的临时文件路径
						let obj = {
							filePath: localPath,
							minDuration: '1',
							maxDuration: '60',
							success: (editRes) => {
								http.temUpload(editRes.tempFilePath).then(res => {
									console.log(res.data);
									let a = JSON.parse(res.data);
									let obj = {
										height:height,
										width: width,
										mediaURL: 'https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/' +
											a.result.name
									}
									this.form.videoList.push(obj);
								})
							},
							fail: (res) => {
								console.log(res);
							}
						}
						uni.openVideoEditor(obj);
					}
				});
			},
			//删除视频
			deleteVideo(index) {
				this.form.videoList.splice(index, 1);
			},

			async enter() {
				if (!this.isSetMubanGuanjianzi) {
					return uni.showToast({
						title: "请先设置文案关键词",
						icon: "none"
					})
				}
				if(this.form.isFilter){
					if(!this.form.filter){
						return uni.showToast({
							title: "请先设置滤镜",
							icon: "none"
						})
					}
				}
				this.form.videoInfo = JSON.stringify(this.form);
				let that = this
				//1为一镜成片 2为多镜成片
				if (this.selectedValue == 'r1') {
					that.form.footageType = 1
				} else {
					that.form.footageType = 2
				}
				
				let modelRes = await showModal("是否提交生成视频,需要扣除" + 1 + "积分")
				if (this.form.textContent == '') {
					this.form.selectText = 'mo';
				}
				
				if (modelRes.confirm) {
					uni.showLoading({
						title: "生成中..."
					})
					let obj = {
						fontSize: that.form.fontSize,
						yinLiang: that.form.yinLiang,
						font: that.form.font,
						fontColor: that.form.fontColor,
						miaobian: that.form.miaobian,
						userId: '',
						shop: app.globalData.shopId,
						fontIndex: that.changeFontIndex
					}
					if(this.form.videoList.length<1){
						return uni.showToast({
							title:"请上传视频",
							icon:"error"
						})
					}
				   //todo 将m3u8替换成阿里云
				   // http.
				   //todo
					http.post('v1/info/shop', obj).then(res => {
						console.log(res);
					})
					// debounce(()=> {
					http.post('v1/jiaoben/test2', that.form).then(res => {
						uni.hideLoading()
						if (res.data.code == 200) {
							uni.showToast({
								title: '请稍等',
								icon: 'warning'
							});
							let obj = {
								jobId: res.data.data.job.body.jobId,
								shopId: that.shopId,
								videoInfo: that.form.videoInfo,
								videoCategory: that.form.videoCategory,
								videoDay: that.form.videoDay,
								footageType: that.form.footageType,
								videoList: JSON.stringify(res.data.data.videoList)
							};
							http.post('v1/jiaoben/Job', obj).then(res => {
								uni.redirectTo({
									url: '/subpkg/mkvideo/myJianjiKu?id=' + res
										.data.data
								});
							});
						} else {
							uni.showToast({
								title: res.data.msg,
								icon: 'none'
							});
						}
					});
					// }, 1000)
				}
				
				
				
				
				
				
				
				return false;
				uni.showModal({
					cancelText: "取消",
					confirmText: "确认",
					title: "是否提交生成视频,需要扣除" + 1 + "积分",
					success: (modelRes) => {
						if (this.form.textContent == '') {
							this.form.selectText = 'mo';
						}
						if (modelRes.confirm) {
							uni.showLoading({
								title: "生成中..."
							})
							let obj = {
								fontSize: that.form.fontSize,
								yinLiang: that.form.yinLiang,
								font: that.form.font,
								fontColor: that.form.fontColor,
								miaobian: that.form.miaobian,
								userId: '',
								shop: app.globalData.shopId,
								fontIndex: that.changeFontIndex
							}

							http.post('v1/info/shop', obj).then(res => {
								console.log(res);
							})
							// debounce(()=> {
							http.post('v1/jiaoben/test2', that.form).then(res => {
								uni.hideLoading()
								if (res.data.code == 200) {
									uni.showToast({
										title: '请稍等',
										icon: 'warning'
									});
									let obj = {
										jobId: res.data.data.job.body.jobId,
										shopId: that.shopId,
										videoInfo: that.form.videoInfo,
										videoCategory: that.form.videoCategory,
										videoDay: that.form.videoDay,
										footageType: that.form.footageType,
										videoList: JSON.stringify(res.data.data.videoList)
									};
									http.post('v1/jiaoben/Job', obj).then(res => {
										uni.redirectTo({
											url: '/subpkg/mkvideo/myJianjiKu?id=' + res
												.data.data
										});
									});
								} else {
									uni.showToast({
										title: res.data.msg,
										icon: 'none'
									});
								}
							});
							// }, 1000)
						}
					}
				})
			},

			handleText(value) {
				this.form.selectText = value.detail.value;
				if (this.form.selectText == 'mo') {
					this.form.textContent = '';
				}
			},

			handleVideo(value) {
				this.selectVideo = value.detail.value;
				let num = parseInt(value.detail.value);
				this.form.bitrate = num;
			},
			cancel() {
				this.expose = false;
			},
			yulan() {
				var url = "https://api.ousukeji.com/web-view&param=" + encodeURIComponent(JSON.stringify(this.webViewData(
					this.form)))
				// JSON.stringify()
				uni.navigateTo({
					url: "/subpkg/yulan/yulan?url=" + url,
				})
			},
			/**
			 * 组装数据
			 */
			webViewData(form) {
				var VideoTrackClips = []
				var AudioTrackClips = []
				if (this.form.videoList.length < 1) {
					return uni.showToast({
						title: "至少上传一条视频 ",
						icon: "none"
					})
				}
				this.form.videoList.forEach(item => {
					var videoItem = {
						"Type": "Video",
						"X": 0,
						"Y": 0,
						"AdaptMode": "Contain",
						"Width": 1,
						"Height": 1,
						"TimelineIn": 0, // 转场的入点(TimelineIn)需要在上一个片段出点(TimelineOut)以前
						"TimelineOut": 7,
						"MediaURL": item.mediaURL,
					}
					VideoTrackClips.push(videoItem)
				})
				this.form.audioList.forEach(item => {
					var musicItem = {
						"MediaURL": item.mediaURL,
						"TimelineIn": 0, // 转场的入点(TimelineIn)需要在上一个片段出点(TimelineOut)以前
						"TimelineOut": 7,
					}
					AudioTrackClips.push(musicItem)
				})
				console.log("文案===》", this.form.content);
				var datas = {
					"Version": 1,
					"SdkVersion": "4.12.2",
					"VideoTracks": [{
						"Id": 1,
						"Type": "Video",
						"Visible": true,
						"Disabled": false,
						"Count": 1,
						"VideoTrackClips": VideoTrackClips
					}],
					"AudioTracks": [{
						"AudioTrackClips": AudioTrackClips
					}],
					"SubtitleTracks": [{
						"Id": 2,
						"Type": "Text",
						"Visible": true,
						"Disabled": false,
						"Count": 1,
						"SubtitleTrackClips": [{
							"AdaptMode": "AutoWrap",
							"Font": this.form.font,
							"Y": 40,
							"SizeRequestType": "Nominal",
							"LineSpacing": 10,
							"OutlineColour": this.form.miaobian,
							"Id": 1,
							"TimelineIn": 0,
							"TimelineOut": 7,
							"Duration": 7,
							"VirginDuration": 7,
							"FontSize": this.form.fontSize / 1.4,
							"FontColor": this.form.fontColor,
							"FontColorOpacity": 1,
							"Content": this.form.content,
							"Alignment": "TopCenter",
							// 自定义字体
							"Font": this.form.font ? this.form.font : 'Yuanti SC',
							"Outline": 2,

						}]
					}],
					"AspectRatio": "9:16",
					"From": "websdk",
					"FECanvas": {
						"Width": 375,
						"Height": 667
					},
					// "FEConfig": {
					// 	"AutoProportion": "681:383"
					// }
				}
				return datas
			},


			reenter() {
				console.log("****", this.isSetMubanGuanjianzi);
				if (!this.isSetMubanGuanjianzi) {
					return uni.showToast({
						title: "请先设置文案关键词",
						icon: "none"
					})
				}
				this.expose = true;
			},
			onSwitchChange(e) {
				this.checkyi = e.detail.value
			},
			handleRadioChange(value) {
				this.selectedValue = value.detail.value;
			},

			//导航脚本库
			navJiaobenku() {
				let footageType = '';
				if (this.selectedValue == 'r1') {
					footageType = '1';
				} else {
					footageType = '2';
				}

				// r1一镜成片 r2多镜成片
				let obj = {
					cateage: this.form.type,
					footageType: footageType,
					shopTrade: this.shopTrade
				};
				console.log(obj);
				uni.navigateTo({
					url: "/subpkg/mkvideo/jiaobenjiaoxue?obj=" + JSON.stringify(obj)
				});
			},
			navGuanjianci() {
				
				uni.navigateTo({
					url: "/subpkg/mkvideo/dingzhibaokuanwenan?type=" + this.form.type
				})
			},
			//开启视频字体颜色
			openVideoFontColor() {
				// http.get("v1/alifontcolor/list").then(res => {
				// 	this.alifontcolorList = res.data.data
				// })
				this.$refs.popup.open()
			},
			navPeiyinyuan() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/peiyinyuan"
				})
			},
			//关闭视频字体颜色
			closeVideoFontColor() {
				this.$refs.popup.close()
			},
			onkoubu(e) {
				this.koubo = e.detail.value;
			},
			onZhuangchang(e) {
				this.form.isZhuangchang = e.detail.value;
			},
			onFilter(e) {
				this.form.isFilter = e.detail.value;
			},
		
			fontSizeChange(e) {
				this.form.fontSize = e.detail.value
			},
			navMusicSucai() {
				uni.navigateTo({
					url: "/subpkg/mkvideo/musicSucai"
				})
			},
			localhostMusic() {
				uni.showToast({
					title: '正在加工中~',
					icon: 'error'
				})
			},
			//选中字体
			changeFont(item, index) {
				this.changeFontIndex = index;
				this.form.fontColor = item.color;
				this.form.font = item.family;
				this.form.miaobian = item.miaobian;
			},
			huifuYinliang(e) {
				this.form.yinLiang = 10
			},
			huifuYuanYin(e) {
				this.form.yuanyin = 0
			},
			yinliangChange(e) {
				this.form.yinLiang = e.detail.value;

			},
			yuanyinChange(e) {
				this.form.yuanyin = e.detail.value;
			},
			enterText() {
				if (this.form.textContent) {
					this.$refs.koubo.close();
				} else {
					uni.showToast({
						title: '检查到你并没有输入哦,已为您切换为默认文案',
						icon: 'none'
					})
					this.form.selectText = 'mo';
					this.$refs.koubo.close();
				}
			},
			enterFont() {
				if (this.form.fontColor) {
					this.$refs.popup.close()
				} else {
					uni.showToast({
						title: '请选择字体',
						icon: 'warning'
					})
				}
			},
			huifuFontSize(e) {
				this.form.fontSize = 24
			},
			navDingbuwenan(e) {
				if (!this.isSetMubanGuanjianzi) {
					return uni.showToast({
						title: "请先设置文案关键词",
						icon: "none"
					})
				}
				let title = e.currentTarget.dataset.title
				// this.form.type
				uni.navigateTo({
					url: `/subpkg/mkvideo/dingbuwenan?title=${title}&cateage=${this.form.type}`
				})
			},
			navJbscShangchuan(data, index) {
				if (this.checkyi) {
					data.miaoIndex = this.miaoList[this.miaoIndex];
				}
				let obj = [];
				this.form.videoList.forEach(item => {
					if (item.id == index + 1) {
						obj.push(item);
					}
				})
				data.index = index + 1;
				data.videoList = obj;
				uni.navigateTo({
					url: '/subpkg/mkvideo/jbscshangchuan?obj=' + JSON.stringify(data)
				})
			},
		}
	}
</script>

<style scoped lang="scss">
	image {
		display: block;
	}

	.all {
		min-height: 100vh;
		height: 100%;
		background-size: contain;
		background-image: url('https://jz-cnsiot.oss-cn-shanghai.aliyuncs.com/mojian/2024/3/21/1711006123961ed7aa87f84224969b18a90325edf048b.png');
		background-repeat: no-repeat;

		.outer {
			position: fixed;
			top: 0;
			right: 0;
			bottom: 0;
			left: 0;
			display: flex;
			justify-content: center;
			align-items: center;
			background-color: rgba(0, 0, 0, 0.5);
			/* 半透明遮罩层可以使内容更突出 */
		}

		.middle {
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.inner {
			position: relative;
			border-radius: 15rpx;
			width: 650rpx;
			/* 假设元素宽度为 200px */
			height: 350rpx;
			/* 假设元素高度为 200px */
			background-color: white;
			display: flex;
			flex-direction: column;
			align-items: center;

			.chat {
				position: absolute;
				right: 20rpx;
				top: 10rpx;
			}

			.RadioNum {
				height: 250rpx;
				flex: 7;
				display: flex;
				align-items: center;
				justify-content: center;

				radio-group {
					display: flex;
					justify-content: space-around;
					align-items: center;
				}
			}

			.btn {
				flex: 3;
				height: 100rpx;
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: center;

				.enterBtn {
					height: 80rpx;
					width: 300rpx;
					line-height: 80rpx;
					color: white;
					text-align: center;
					background-color: rgb(14, 16, 101);
					border-radius: 50rpx;
				}
			}
		}

		.BtnList {
			position: fixed;
			bottom: 0rpx;
			height: 80rpx;
			width: 100vw;
			background-color: white;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.btn {
				width: 300rpx;
				height: 80%;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 50rpx;
			}
		}

		.timu {
			display: flex;
			align-items: center;
			margin: 30rpx;

			.xuhao {
				height: 42rpx;
				width: 42rpx;
				text-align: center;
				line-height: 42rpx;
				background: #333;
				color: #fff;
				font-size: 24rpx;
			}

			.title {
				color: #333;
				font-size: 36rpx;
				font-weight: 700;
				margin-left: 20rpx;
			}
		}

		.red-tip {
			font-size: 28rpx;
			width: 650rpx;
			color: red;
			margin: 20rpx 0rpx;
		}

		.sing-box {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20rpx;
			border-radius: 12rpx;

			.left {
				font-size: 32rpx;
				font-weight: bold;
			}

			.right {
				color: red;
				font-size: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;

				.jiantou {
					font-size: 48rpx;
					margin-left: 10rpx;
				}
			}
		}

		.RadioNum {
			radio-group {
				width: 650rpx;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
		}

		// 视频素材start
		.sucai {
			margin: 20rpx;
			border-radius: 12rpx;

			.header {
				font-size: 32rpx;
				font-weight: 700;
				padding-bottom: 20rpx;
				border-bottom: 1rpx solid #f1f1f1;
			}

			.beizhu {
				font-size: 26rpx;
				color: #666;
				//margin: 30rpx 0 20rpx 0;
			}

			.shuoming {
				font-size: 26rpx;
				color: #666;
				//margin: 30rpx 0 20rpx 0;
			}

			.video-upload {
				height: 150rpx;
				width: 150rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #eee;
				border-radius: 10rpx;
			}
		}

		.xing {
			color: red;
			//margin-right: 10rpx;
		}

		.right-icon {
			font-size: 42rpx;
			color: #999;
			//margin-left: 10rpx;
		}

		.question {
			height: 40rpx;
			width: 40rpx;
			background: #00008B;
			color: #fff;
			border-radius: 20rpx;
			font-size: 22;
			text-align: center;
			line-height: 40rpx;
			//margin-right: 10rpx;
		}

		// 统一素材时长
		.sucaishichang {
			//margin: 20rpx 30rpx;
			border-radius: 12rpx;

			.item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx;
				border-bottom: 1rpx solid #f1f1f1;

			}

			.left {
				font-size: 32rpx;
				font-weight: bold;
				display: flex;
				align-items: center;
			}

			.right {
				display: flex;
				align-items: center;
				color: #666;
				font-size: 30rpx;

				.right-tip {
					font-size: 30rpx;
					color: #666;
				}
			}
		}

		.wenan {
			margin: 30rpx;

			.header {
				display: flex;
				height: 80rpx;
				align-items: center;

				.header-item {
					flex: 1;
					text-align: center;
					font-size: 32rpx;
				}
			}

			.content {
				padding: 0 30rpx;
				padding-bottom: 20rpx;

				.item {
					height: 80rpx;
					line-height: 80rpx;
					font-size: 32rpx;
					display: flex;
					justify-content: space-between;
					border-bottom: 1rpx solid #f1f1f1;

					.left {
						font-weight: bold;
					}

					.right {
						color: #666;
					}
				}

				.ziti {
					padding-top: 30rpx;

					.yulan {
						height: 150rpx;
						line-height: 150rpx;
						width: 100%;
						text-align: center;
					}

					.slider-box {
						background: #eee;
						border-radius: 12rpx;
						margin: 0 10rpx 10rpx 10rpx;
						padding: 20rpx 0;

						.slider-footer {
							display: flex;
							justify-content: space-around;
							align-items: center;

							.xiao {
								font-size: 28rpx;
							}

							.huifu {
								width: 150rpx;
								height: 50rpx;
								line-height: 50rpx;
								font-size: 28rpx;
								border: 1rpx solid #ccc9ce;
								text-align: center;
								border-radius: 25rpx;
							}

							.da {
								font-size: 28rpx;
							}
						}

					}
				}

			}
		}

		.close {
			width: 50rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #727073;
			color: #fff;
			position: absolute;
			right: -15rpx;
			top: -15rpx;
			border-radius: 25rpx;
			text-align: center;
		}

		.radius {
			height: 750rpx;
			background: #fff;
			border-top-left-radius: 30rpx;
			border-top-right-radius: 30rpx;
			overflow: hidden;
			border: 1rpx solid #fff;
			position: relative;


			.header {
				font-size: 36rpx;
				font-weight: bold;
				height: 100rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				background: #fff;
				margin: 0 30rpx;

			}

			.content {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				margin: 0rpx 20rpx 30rpx 20rpx;

				.item {
					width: 29%;
					height: 120rpx;
					border: 1rpx solid #eee;
					background-color: rgb(238, 234, 249);
					border-radius: 10rpx;
					display: flex;
					justify-content: center;
					font-weight: bold;
					align-items: center;
					margin-bottom: 30rpx;
					position: relative;
					font-size: 40rpx;
				}
			}
		}
	}
</style>